<template>
  <div>
    <a-modal title="查看" :width="900" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel" @ok="handleOk"
      cancelText="关闭" class="pop-table" :closable="false">
      <a-form :form="form" style="margin-left:30px;margin-top:30px">
        <a-row>
          <a-col :span="12">
            <a-form-item>
              <a-input placeholder="请粘贴链接" v-model="model.outsideUrl" />
            </a-form-item>
          </a-col>
          <a-col :span="6" style="margin:0 10px">
            <a-form-item>
              <a-input placeholder="请输入描述" v-model="model.outsideName" />
            </a-form-item>
          </a-col>
          <a-col :span="4" style="margin-top:8px">
            <span>
              <a-icon @click="addData" type="plus-circle" :style="{ fontSize: '22px', color: '#1E90FF' }" />
            </span>
          </a-col>
        </a-row>
      </a-form>
      <a-table ref="table" size="middle" :columns="columns" :dataSource="dataResource" :pagination="pagination"
        :loading="loading" @change="handleTableChange" class="pop-table">
        <span slot="action" slot-scope="text, record">
          <a-popconfirm title="确认删除?" @confirm="deleteClue(record)" okText="确认" cancelText="取消">
            <a href="#" style="margin-right: 10px">删除</a>
          </a-popconfirm>
        </span>
      </a-table>

    </a-modal>
  </div>
</template>

<script>
  import {
    deleteAction,
    getAction,
    httpAction
  } from '@/api/manage'
  import DetailList from '@/components/tools/DetailList'
  const DetailListItem = DetailList.Item
  export default {
    components: {
      DetailList,
      DetailListItem
    },
    props: {
      clueLinkList: {
        type: Array,
      },
    },
    data() {
      return {
        visible: false,
        visibleDetail: false,
        confirmLoading: false,
        model: {
          outsideUrl: '',
          outsideName: ''
        },
        form: this.$form.createForm(this),
        dataResource: [],
        pagination: {},
        pageNo: 1,
        pageSize: 10,
        selectedRowKeys: [],
        loading: false,
        recordLocal: {},
        columns: [{
            title: '链接',
            align: 'center',
            dataIndex: 'outsideUrl'
          },
          {
            title: '描述',
            align: 'center',
            dataIndex: 'outsideName'
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: {
              customRender: 'action'
            },
            align: 'center',
            width: 170
          }
        ],
        url: {
          list: 'task/tasTaskOutside/list',
          delete: 'task/tasTaskOutside/delete',
          deleteBatch: '/clues/deleteBatch',
          initKeywordList: '/clues/initKeywordList',
          add: 'task/tasTaskOutside/add'
        }
      }
    },
    methods: {
      addData() {
        if (this.model.outsideUrl && this.model.outsideName) {
          this.dataResource.push(this.model)
          this.model = {
            outsideUrl: '',
            outsideName: ''
          }
        } else {
          this.$message.warning('请查看链接和描述是否已填写')
        }
      },
      rest() {
        this.form.resetFields()
      },
      clue(data) {
        this.dataResource = data;
        this.visible = true
      },
      // getAllList() {
      //   getAction(`/task/tasTaskOutside/list?pageNo=${this.pageNo}&pageSize=${this.pageSize}`).then(res => {
      //     if (res.success) {
      //       this.data = res.result.records
      //       this.pagination.total = res.result.total
      //     }
      //   })
      // },
      handleTableChange(pagination, filters, sorter) {
        const pager = { ...this.pagination
        }
        pager.current = pagination.current
        this.pageNo = pagination.current
        this.pageSize = pagination.pageSize
        this.pagination = pager
        // this.getAllList()
      },
      handleDetail(record) {
        this.recordLocal = record
        this.visibleDetail = true
      },
      deleteClue(record) {
        this.dataResource.forEach((item, index) => {
          if (record.id === item.id) {
            this.dataResource.splice(index, 1)
          }
        })
      },
      onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      close() {
        this.visible = false
      },
      closeDetail() {
        this.visibleDetail = false
      },
      handleOk() {
        this.$emit('update:clueLinkList', this.dataResource)
        // var resultList = [];
        // this.selectedRowKeys;
        // var that = this;
        // this.$emit('close', this.dataResource)
        this.close()
      },
      handleCancel() {
        this.close()
      },
      handleOkDetail() {
        this.closeDetail()
      },
      handleCancelDetail() {
        this.closeDetail()
      },
      show() {
        this.visible = true
        this.dataResource = Array.from(this.clueLinkList)
      }
    },
    watch: {
      clueLinkList(newValue, oldValue) {
        this.dataResource = Object.assign(newValue);
      }
    },
  }
</script>

<style>
</style>
